<template>
	<view class="f-page poetry-bg">
    <u-gap height="20"></u-gap>
    <u--text align="center" :size="20" :text="poetry.title"></u--text>
    <u-gap height="10"></u-gap>
    <u--text type="info" align="center" :size="15" :text="'['+poetry.dynasty+']'+poetry.author"></u--text>
    <u-gap height="10"></u-gap>
    <view class="poetry-tag">
      <view class="u-demo-block__content">
        <view v-for="(tag,index) in poetry.tags" :key="index" class="f-page__tag-item"><u-tag shape="circle" size="mini" :text="tag"/></view>
      </view>
    </view>

    <u-gap height="20"></u-gap>
    <rich-text :nodes="poetry.content"></rich-text>

    <u-gap height="20"></u-gap>
    <u-tabs :list="extList" @click="clickExtHandle"></u-tabs>
    <u-parse :content="extContent"></u-parse>
    <uni-fab ref="fab" :pattern="pattern1" horizontal="left"  vertical="bottom" direction="vertical" @fabClick="mpShareClick"/>
    <uni-fab ref="fab" :pattern="pattern" horizontal="right" vertical="bottom" direction="vertical" :content="content" @trigger="trigger"/>

	</view>
</template>
<script>
  import { poetInfo } from '@/api/poetry'
  export default {
    data() {
      return {
        skeletonLoading: true,
        poetry:{  title: '',  author: '',  paragraphs: [],  content: '' },
        extList: [{name: '评析',type: 'shangxi'}, {name: '注释',type: 'zhu'}, {name: '译文',type: 'yi' }],
        extContent: '',
        pattern1: {	icon: 'redo-filled'	},
        pattern: {	color: '#7A7E83',	backgroundColor: '#fff',	selectedColor: '#007AFF',	buttonColor: '#007AFF',	iconColor: '#fff'	},
				content: [
          {	iconPath: '/static/tabbar/home_1.png',	selectedIconPath: '/static/tabbar/home_2.png',	text: '首页',	active: false},
					{	iconPath: '/static/tabbar/apply_1.png',	selectedIconPath: '/static/tabbar/apply_2.png',	text: '应用',	active: false},
					{	iconPath: '/static/tabbar/my_1.png',	selectedIconPath: '/static/tabbar/my_2.png',	text: '我的',	active: false}
				]
      }
    },
    onLoad: function(option) {
      let poetId = option.id
      poetInfo({params: {poetId:poetId},custom: { auth: true,toast: false }}).then(response => {
        this.poetry = response.data
        this.poetry.content = '<p style="font-size: 20px; letter-spacing: 3px;">'+this.poetry.paragraphs.join("<br/>")+'</p>'
        this.skeletonLoading = false
        this.formatExt(this.extList[0].type)
      })
    },
    created(){

    },

    methods: {
      clickExtHandle(item){
        this.formatExt(item.type)
      },

      formatExt(extType){
        let extArray = this.poetry[extType].content
        this.extContent = '<p style="font-size: 15px; color: gray; text-align: center; margin-top: 5px;letter-spacing: 5px;">'+extArray.join("<br/>")+'</p>'
      },
      trigger(e) {
        console.log(e,e.item.active)
				this.content[e.index].active = !e.item.active
      },
      mpShareClick(){

      }
    }
  }
</script>
<style lang="scss">

  .poetry-bg{
    text-align: center;
  }
  .poetry-tag{
    margin: 0 60px;
    text-align: center;
  }
  .u-demo-block__content{
    flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
  }
  .f-page__tag-item {
		margin-right: 5px;
	}

</style>
